<template>
  <view class="content" :style="{ paddingTop: CustomBar + 'px' }">
    <view
      class="contain_tab flex-row justify-center items-center"
      :style="{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }"
    >
      <view class="flex items-center w100 tabbar">
        <text class="store_name c_f">我的</text>
      </view>
    </view>
    <view class="bgred">
      <view class="menu flex flex-row justify-between items-center">
        <view class="menu-top" v-if="isLogin">
          <img :src="userInfo.avatar" class="menu-top-img" />
          <view class="menu-top-mid">
            <view class="menu-top-mid-1">{{formatNumber(userInfo.phone)}}</view>
            <view class="menu-top-mid-2">
              <view
                class="menu-top-mid-2-box"
                @tap="gourl('/subpageC/user_info/user_info')"
              >
                <img
                  src="/static/edit.svg"
                  class="menu-top-mid-2-box-img"
                  alt=""
                />
                <text class="menu-top-mid-2-box-txt">修改头像或者昵称</text>
              </view>
            </view>
          </view>
        </view>
        <view class="menu-top" v-else>
          <img
            src="https://tcjyh2022.oss-cn-hangzhou.aliyuncs.com/wechat/csqx_zhong.png"
            class="menu-top-img"
          />
          <view class="menu-top-mid">
            <view class="menu-top-mid-2">
              <view class="menu-top-mid-2-btn" @tap="toLogin"
                >去授权手机号登录</view
              >
            </view>
          </view>
        </view>
        <view class="menu-bottom">
          <view
            class="menu-bottom-item"
            v-for="(item, index) in menu"
            :key="index"
            @click="gourl(item.url)"
          >
            <view class="men5u-bottom-item-1">{{ item.num }}</view>
            <view class="menu-bottom-item-2">{{ item.text }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="rwlist" v-if="uid">
      <!-- 邀请有礼 -->
      <img class="rwlist-img" src="https://csqxtest.nangua.website/crmebimage/public/maintain/2023/12/07/889613b3d67642e290eb16144b50c1daeg9vdu3zzl.png" alt="" />
      <button class="rwlist-btn" open-type="share"></button>
    </view>
    <view class="box">
      <view class="box-faqi" v-if="userInfo.relateId">
        <view class="box-faqi-1">
          <view class="box-faqi-1-title">商家功能</view>
        </view>
        <view class="box-faqi-2">
          <view
            class="box-faqi-2-item"
            v-for="(item, index) in store"
            :key="index"
            @click="gourl(item.url)"
          >
            <img class="box-faqi-2-item-icon" :src="item.icon" />
            <view class="box-faqi-2-item-title">{{ item.text }}</view>
          </view>
        </view>
      </view>
      <view class="box-nav">
        <view
          class="box-nav-item"
          v-for="(item, index) in mylist"
          :key="index"
          @click="gourl(item.url)"
        >
          <img :src="item.icon" class="box-nav-item-1" alt="" />
          <view class="box-nav-item-2"
            >{{ item.text }}
            <text class="box-nav-item-2-notice" v-if="item.num">{{
              item.num
            }}</text></view
          >
          <img src="/static/arrow_right.png" class="box-nav-item-3" alt="" />
        </view>
      </view>
      <view class="box-nav">
        <view
          class="box-nav-item"
          v-for="(item, index) in other"
          :key="index"
          @click="gourl(item.url)"
        >
          <img :src="item.icon" class="box-nav-item-1" alt="" />
          <view class="box-nav-item-2">{{ item.text }}</view>
          <img src="/static/arrow_right.png" class="box-nav-item-3" alt="" />
        </view>
        <!-- <view
          class="box-nav-item" style="position: relative;"
        >
        <img src="/static/mine/m_10.svg" class="box-nav-item-1" alt="" />
        <view class="box-nav-item-2">我的客服</view>
        <img src="/static/arrow_right.png" class="box-nav-item-3" alt="" />
        <button open-type="contact" style="position: absolute;left: 0;top: 0;opacity: 0;width: 100%;height: 100%"></button>
        </view> -->
      </view>
      <view v-if="isLogin" class="logout" @tap="logout">退出登录</view>
    </view>
    <uni-popup ref="buypopup">
      <view class="buylist">
        <view style="text-align: right">
          <image
            class="close_icon"
            src="@/static/mine/close.svg"
            mode="widthFix"
            @click="closePop"
          ></image>
        </view>
        <view style="text-align: center">
          <img style="width: 360rpx; height: 360rpx" :src="view_img" alt="" />
        </view>
        <view class="btn" @click="saveQRcodeFn">保存到本地</view>
      </view>
    </uni-popup>
    <uni-popup ref="kefupopup">
      <view class="buylist">
        <view style="text-align: center">
          <img style="width: 360rpx; height: 360rpx" show-menu-by-longpress="true" src="https://csqx.nangua.website/crmebimage/public/maintain/2024/01/16/db73e8240443453fbb44f2f1555beae90kbpeyi23p.jpeg" alt="" />
        </view>
        <view style="font-size: 24rpx;text-align: center;">
          长按加工作人员微信
        </view>
        <view class="btn" @click="closeKefu">关闭</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { toLogin } from "@/libs/login.js";
import { mapGetters } from "vuex";
import { getLogout } from "@/api/user.js";
import { wxcode } from "@/api/api.js";
import { sjsaoprize } from '@/api/activity.js'
import { appointmentUpdate } from '@/api/order.js'
import {
	parseQuery
} from '@/utils';
export default {
  computed: mapGetters(["isLogin", "userInfo", "uid"]),
  data() {
    return {
      CustomBar: this.CustomBar,
      StatusBar: this.StatusBar,
      isMerchant: false,
      view_img: "",
      menu: [
        {
          num: 0,
          url: "/subpageB/choujiang_join/choujiang_join",
          text: "参与抽奖",
        },
        {
          num: 0,
          url: "/subpageB/choujiang_award/choujiang_award",
          text: "中奖记录",
        },
        {
          num: 0,
          url: "/subpageB/choujiang_count/choujiang_count",
          text: "抽奖次数",
        },
      ],
      store: [
        {
          icon: require("static/mine/ic_02.svg"),
          text: "抽奖管理",
          url: "/subpageC/store_choujiang/store_choujiang",
        },
        {
          icon: require("static/mine/ic_01.svg"),
          text: "奖品管理",
          url: "/subpageC/store_hexiao/store_hexiao",
        },
        {
          icon: require("static/mine/ic_04.svg"),
          text: "抽奖核销",
          url: "jiangpincheck",
        },
        {
          icon: require("static/mine/ic_03.svg"),
          text: "粉丝管理",
          url: "/subpageC/store_fans/store_fans",
        },
        {
          icon: require("static/mine/ic_04.svg"),
          text: "商家信息",
          url: "/subpageB/store_info/store_info?id=",
        },
        {
          icon: require("static/mine/ic_04.svg"),
          text: "我的推广码",
          url: "tuiguangma",
        },
        {
          icon: require("static/mine/ic_04.svg"),
          text: "订单核销",
          url: "dingdancheck",
        },
        {
          icon: require("static/mine/ic_04.svg"),
          text: "转零钱",
          url: "/subpageC/user_withdraw/user_withdraw",
        },
        {
          icon: require("static/mine/ic_04.svg"),
          text: "对账订单",
          url: "/subpageB/user_order/user_order",
        },
        {
          icon: require("static/mine/ic_04.svg"),
          text: "对账列表",
          url: "/subpageB/reconciliation_list/reconciliation_list",
        },
      ],
      mylist: [
        {
          icon: require("static/mine/m_01.svg"),
          text: "我的订单",
          url: "/subpageB/order_list/order_list",
        },
        // {
        //   icon: require("static/mine/m_01.svg"),
        //   text: "历史浏览",
        //   url: "/subpageB/order_list/order_list",
        // },
        {
          icon: require("static/mine/m_02.svg"),
          text: "我的订阅",
          url: "/subpageC/user_subscribe/user_subscribe",
        },
        {
          icon: require("static/mine/m_03.svg"),
          text: "我的奖品",
          url: "/subpageC/user_award/user_award",
        },
        {
          icon: require("static/mine/m_04.svg"),
          text: "我的地址",
          url: "/subpageC/address_list/address_list",
        },
        {
          icon: require("static/mine/m_05.svg"),
          text: "我的消息",
          url: "/subpageC/user_notice/user_notice",
          num: 0,
        },
      ],
      other: [
        {
          icon: require("static/mine/m_06.svg"),
          text: "抽奖小知识",
          url: "/subpageC/qa/qa",
        },
        // {
        //   icon: require("static/mine/m_07.svg"),
        //   text: "商务合作",
        //   url: "",
        // },
        // {
        //   icon: require("static/mine/m_08.svg"),
        //   text: "xiangga",
        //   url: "",
        // },
        {
          icon: require("static/mine/m_09.svg"),
          text: "意见反馈",
          url: "/subpageC/user_feedback/user_feedback",
        },
        {
          icon: require("static/mine/m_10.svg"),
          text: "我的客服",
          url: "kefu",
        },
      ],
    };
  },
  onShareAppMessage(res) {
    return {
      title: '好友邀请你一起抽奖啦！！',
      path: '/pages/index/index?spreadId=' + this.uid,
      imageUrl: "https://tcjyh2022.oss-cn-hangzhou.aliyuncs.com/wechat/csqx_zhong.png"
    }
  },
  onPullDownRefresh() {
    this.getData();

    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  onShow: function () {
    this.getData();
  },

  methods: {
    async getData() {
      let that = this;
      if (that.isLogin) {
        // relateId是否有值 如果是商家身份就设置为true
        await this.$store.dispatch("USERINFO");
        this.menu[0].num = this.userInfo.drawRecordCount;
        this.menu[1].num = this.userInfo.drawMatchCount;
        this.menu[2].num = this.userInfo.drawBalance;
        if (this.mylist[4]) {
          this.mylist[4].num = this.userInfo.unreadMessage;
        }
      }
    },
    closePop() {
      this.$refs.buypopup.close();
    },
    closekefuPop() {
      this.$refs.kefupopup.close();
    },
    toLogin() {
      toLogin();
    },
    saveQRcodeFn() {
      //保存图片到相册按钮的点击事件函数
      let that = this;
      uni.getSetting({
        success(res) {
          console.log(res);
          if (!res.authSetting["scope.writePhotosAlbum"]) {
            uni.authorize({
              scope: "scope.writePhotosAlbum",
              success(res) {
                that.saveBase64ImageToPhotosAlbum();
              },
              fail() {
                uni.showModal({
                  content: "请允许相册权限,拒绝将无法正常保存图片",
                  showCancel: false,
                  success() {
                    uni.openSetting({
                      success(settingdata) {
                        if (settingdata.authSetting["scope.writePhotosAlbum"]) {
                        } else {
                          console.log("获取权限失败");
                          uni.showToast({
                            title: "获取权限失败",
                            icon: "none",
                          });
                        }
                      },
                    });
                  },
                });
              },
            });
          } else {
            that.saveBase64ImageToPhotosAlbum();
          }
        },
      });
    },
    saveBase64ImageToPhotosAlbum() {
      uni.downloadFile({
        url: this.view_img,
        success: (res) => {
          if (res.statusCode === 200) {
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: function (res2) {
                uni.hideLoading();
                uni.showToast({
                  title: "保存成功",
                  icon: "none",
                });
              },
              fail: function (err) {
                uni.hideLoading();
                console.log(err.errMsg);
                uni.showToast({
                  title: "保存失败",
                  icon: "none",
                });
              },
            });
          }
        },
      });
    },
    gourl(url) {
      if (url == 'kefu') {
       return  this.$refs.kefupopup.open();
      }
      if (url == '/subpageC/qa/qa') {
       return uni.navigateTo({
         url,
       });
      }
      if (!this.isLogin) {
        toLogin();
        return;
      }
      if (url == "tuiguangma") {
        // 展示推广二维码  下载保存到本地
        // 获取二维码
        wxcode({
          "env": "release",
          // env: "trial",
          path: "pages/index/index",
          scene: "relateId=" + this.userInfo.relateId,
          width: 860,
        }).then((res) => {
          this.view_img = res.data.url;
          this.$refs.buypopup.open();
        });
      } else if (url == "dingdancheck") {
        uni.scanCode({
          success: (res) => {
            console.log(res.result, "res.result----");
            if (res && res.result) {
              let value = parseQuery(res.result);
              console.log(value, "value------");
              let code = value
              if (typeof value == "object") {
                code = value.code
              }
              uni.showModal({
                title: "提示",
                content: "确认要核销订单吗",
                success: function (res) {
                  if (res.confirm) {
                    appointmentUpdate(code).then((res) => {
                      uni.showToast({
                        title: "核销成功",
                        icon: "none",
                      });
                    });
                  }
                },
              });
            } else {
              uni.showToast({
                title: "请使用正确二维码",
                icon: "none",
              });
            }
          },
        });
      } else if (url == "jiangpincheck") {
        uni.scanCode({
          success: (res) => {
            let codeArray = res.result;
            console.log(codeArray);
            if (res.scanType == "QR_CODE") {
              uni.showModal({
                title: "提示",
                content: "确认要核销订单吗",
                success: function (info) {
                  if (info.confirm) {
                    sjsaoprize(Number(codeArray))
                      .then((e) => {
                        uni.showToast({
                          title: "核销成功",
                          duration: 2000,
                          icon: "none",
                        });
                      })
                      .catch((M) => {
                        uni.showToast({
                          title: JSON.stringify(M.message),
                          duration: 2000,
                          icon: "none",
                        });
                      });
                  }
                },
              });
              console.log("条码类型：" + res.scanType);
              console.log("条码内容：" + res.result);
            } else {
              uni.showToast({
                title: "请扫描正确的二维码",
                duration: 2000,
                icon: "none",
              });
            }
          },
        });
      } else {
        if (url.indexOf("store_info") > -1) {
          url += +this.userInfo.relateId;
        }
        uni.navigateTo({
          url: url,
        });
      }
    },
    closeKefu() {
      this.$refs.kefupopup.close()
    },
    formatNumber(number) {
      let str = number + '';
      if(this.userInfo.nickname === '微信用户') {
        // 使用正则表达式匹配三位整数并替换为三个星号
        return '微信用户' + str.replace(/(\d{3})\d*(\d{4})/, "$1****$2");
      } else {
        return this.userInfo.nickname
      }
    },
    logout() {
      let that = this;
      uni.showModal({
        title: "提示",
        content: "确认退出登录?",
        success: function (res) {
          if (res.confirm) {
            getLogout()
              .then((res) => {
                that.$store.commit("LOGOUT");
                that.menu[0].num = 0;
                that.menu[1].num = 0;
                that.menu[2].num = 0;
                if (that.mylist[4]) {
                  that.mylist[4].num = 0;
                }
              })
              .catch((err) => {
                console.log(err);
              });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
  },
};
</script>

<style lang="scss">
.close_icon {
  width: 34rpx;
}
.buylist {
  background: #fff;
  padding: 30rpx;
  border-radius: 20rpx;
  width: 650rpx;
  width: 500rpx;
  .btn {
    border-radius: 10rpx;
    background: #df4b43;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    height: 84rpx;
    color: #fff;
    font-size: 24rpx;
  }
}
.logout {
  width: 280rpx;
  height: 68rpx;
  padding: 16rpx 10rpx;
  text-align: center;
  border-radius: 1000rpx;
  margin: 24rpx auto 0;
  font-family: PingFang SC;
  font-size: 24rpx;
  font-style: normal;
  font-weight: 400;
  color: #525252;
  border: 1rpx solid #525252;
  background: #f5f5f5;
}
.rwlist {
  width: 710rpx;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20rpx;
  background: #fff;
  border-radius: 20rpx;
  background: #fff;
  position: relative;
  &-img {
    width: 100%;
    height: 300rpx;
    border-radius: 20rpx;
  }
  &-btn {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }
}
.box {
  padding: 24rpx 20rpx 100rpx;
  width: 100vw;
  &-nav {
    margin-top: 24rpx;
    border-radius: 20rpx;
    padding: 20rpx 30rpx;
    background: #fff;
    &-item {
      height: 88rpx;
      padding: 24rpx 0;
      display: flex;
      align-items: center;
      &-1 {
        width: 48rpx;
        height: 48rpx;
      }
      &-2 {
        color: #000;
        font-family: PingFang SC;
        font-size: 28rpx;
        font-style: normal;
        font-weight: 400;
        margin-left: 24rpx;
        flex: 1;
        display: flex;
        align-items: center;
        &-notice {
          margin-left: 10rpx;
          background: #df4b43;
          color: #fff;
          border-radius: 50%;
          display: inline-block;
          min-width: 30rpx;
          line-height: 30rpx;
          padding: 5rpx;
          font-size: 20rpx;
          text-align: center;
        }
      }
      &-3 {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
  &-faqi {
    background: #fff;
    width: 100%;
    border-radius: 20rpx;
    &-2 {
      border-top: 1px solid #e3e3e3;
      display: flex;
      padding: 20rpx 0;
      flex-wrap: wrap;
      &-item {
        width: 25%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 110rpx;
        &-icon {
          width: 48rpx;
          height: 48rpx;
          margin-bottom: 10rpx;
        }
        &-title {
          color: rgba(0, 0, 0, 0.9);
          font-family: PingFang SC;
          font-size: 24rpx;
          font-style: normal;
          font-weight: 400;
        }
      }
    }
    &-3 {
      border-top: 1px solid #e3e3e3;
      display: flex;
      padding: 16rpx 30rpx 20rpx;
      color: #686868;
      font-family: PingFang SC;
      font-size: 24rpx;
      font-style: normal;
      font-weight: 400;
    }
    &-1 {
      width: 710rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 80rpx;
      padding: 20rpx 30rpx;
      &-title {
        color: #000;
        font-family: PingFang SC;
        font-size: 28rpx;
        font-style: normal;
        font-weight: 500;
      }
      &-icon {
        width: 40rpx;
        height: 40rpx;
        padding: 10rpx 0 10rpx 30rpx;
      }
    }
  }
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.contain_tab {
  position: fixed;
  z-index: 99;
  background-color: #df4b43;
  width: 100%;
  left: 0;
  top: 0;
  .tabbar {
    width: 100%;
    position: relative;
    padding-left: 30rpx;
    .share {
      width: 40rpx;
      left: 40rpx;
      margin-left: 40rpx;
    }
  }
}
.bgred {
  padding: 30rpx 0;
  padding-bottom: 0;
}
.w50 {
  width: 50%;
  color: #fff;
}
.menu {
  width: 710rpx;
  background-color: #fff;
  border-radius: 20rpx;
  margin-left: 20rpx;
  flex-direction: column;
  &-bottom {
    height: 130rpx;
    width: 100%;
    display: flex;
    &-item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      &-1 {
        font-family: PingFang SC;
        font-size: 38rpx;
        font-style: normal;
        font-weight: 500;
        color: #000;
      }
      &-2 {
        font-family: PingFang SC;
        font-size: 24rpx;
        font-style: normal;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.9);
      }
    }
  }
  &-top {
    display: flex;
    align-items: center;
    height: 184rpx;
    padding: 32rpx;
    border-bottom: 1px solid #efefef;
    width: 100%;
    &-img {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
    }
    &-mid {
      display: flex;
      flex-direction: column;
      margin-left: 24rpx;
      &-1 {
        color: rgba(0, 0, 0, 0.8);
        font-family: PingFang SC;
        font-size: 38rpx;
        font-style: normal;
        font-weight: 500;
      }
      &-2 {
        &-btn {
          padding: 16rpx;
          border: 1px solid #df4b43;
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: PingFang SC;
          font-size: 24rpx;
          font-style: normal;
          font-weight: 400;
          color: #df4b43;
          border-radius: 1000rpx;
        }
        &-box {
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid #df4b43;
          padding: 6rpx 16rpx;
          border-radius: 100rpx;
          &-img {
            width: 24rpx;
            height: 24rpx;
          }
          &-txt {
            color: #df4b43;
            font-family: PingFang SC;
            font-size: 24rpx;
            font-style: normal;
            font-weight: 400;
          }
        }
      }
    }
  }
}
</style>
